<div ng-controller="materialscontroller">
	<img ng-show="loadingEvents" style="width:25px;height:25px" alt="{{ Main_Loading }}" src="Resources/Pictures/ajax-loader.gif" />
	<div class="task" ng-hide="loadingMaterials">
		<button ng-hide="loadingMaterials" type="button" class="btn btn-primary" ng-click="prepareAddMaterialCommand()">
			<span class="glyphicon glyphicon-plus"></span> {{ Main_Add }}
		</button>
		<label class="checkbox" ng-repeat="material in materials">
			<span>[{{material.Id}}] {{material.Name}} {{ material.State }}</span>
			<a ng-click="confirmDeleteMaterialCommand(material)" class="pull-right"><i class="glyphicon glyphicon-trash"></i></a>
			<a ng-click="prepareEditMaterialCommand(material)" class="pull-right"><i class="glyphicon glyphicon-edit" style="margin-right:10px"></i></a>
		</label>
	</div>

	<div class="modal" id="addMaterial">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">x</button>
					<h4 class="modal-title">{{ Materials_AddNew }}</h4>
				</div>
				<div class="modal-body">
					<div class="container">
						<div class="row">
							<div class="col-sm-8">
								<form>
									<div class="row">
										<div class="row form-group">
											<div class="col-xs-6">{{ Materials_Name }} <input ng-model="addMaterial_Name" class="form-control" placeholder="{{ Materials_Name }}"/></div>
										</div>
										<div class="row form-group">
											<div class="col-xs-6">{{ Materials_Description }} <input ng-model="addMaterial_Description" class="form-control" placeholder="{{ Materials_Description }}"/></div>
										</div>
										<div class="row form-group">
											<div class="col-xs-6">{{ Materials_AffectedUser }} <select class="form-control" data-ng-options="user as user.Firstname + ' ' + user.Lastname for user in users" data-ng-model="addMaterial_AffectedUser"></select></div>
										</div>
										<div class="row form-group">
											<div class="col-xs-6">{{ Materials_Location }} <input ng-model="addMaterial_Location" class="form-control" placeholder="{{ Materials_Location }}"/></div>
										</div>
										<div class="row form-group">
											<div class="col-xs-6">{{ Materials_State }} <select class="form-control" data-ng-options="pro for pro in materialsState" data-ng-model="addMaterial_State"></select></div>
										</div>
									</div>
									<img ng-hide="canAddMaterial" desc="banner" style="width:25px;height:25px" alt="{{ Main_Loading }}" src="Resources/Pictures/ajax-loader.gif" />
									<button ng-show="canAddMaterial" type="button" class="btn btn-primary" ng-click="addMaterialCommand()">
										<span class="glyphicon glyphicon-ok"></span> {{ Main_Validate }}
									</button>
								</form>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<div id="messageAddMaterial" class="alert alert-{{ messageType }} alert-dismissible" role="alert" ng-show="messageAddMaterialVisible">
						<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
						{{ messageLabel }}
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="modal" id="editMaterial">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">x</button>
					<h4 class="modal-title">{{ Materials_EditMaterial }} #{{ editMaterial_Id }}</h4>
				</div>
				<div class="modal-body">
					<div class="container">
						<div class="row">
							<div class="col-sm-8">
								<form>
									<div class="row">
										<div class="row form-group">
											<div class="col-xs-6">{{ Materials_Name }} <input ng-model="editMaterial_Name" class="form-control" placeholder="{{ Materials_Name }}"/></div>
										</div>
										<div class="row form-group">
											<div class="col-xs-6">{{ Materials_Description }} <input ng-model="editMaterial_Description" class="form-control" placeholder="{{ Materials_Description }}"/></div>
										</div>
										<div class="row form-group">
											<div class="col-xs-6">{{ Materials_AffectedUser }} <select class="form-control" data-ng-options="user as user.Firstname + ' ' + user.Lastname for user in users" data-ng-model="editMaterial_AffectedUser"></select></div>
										</div>
										<div class="row form-group">
											<div class="col-xs-6">{{ Materials_Location }} <input ng-model="editMaterial_Location" class="form-control" placeholder="{{ Materials_Location }}"/></div>
										</div>
										<div class="row form-group">
											<div class="col-xs-6">{{ Materials_State }} <select class="form-control" data-ng-options="pro for pro in materialsState" data-ng-model="editMaterial_State"></select></div>
										</div>
									</div>
									<img ng-hide="canUpdateMaterial" desc="banner" style="width:25px;height:25px" alt="{{ Main_Loading }}" src="Resources/Pictures/ajax-loader.gif" />
									<button ng-show="canUpdateMaterial" type="button" class="btn btn-primary" ng-click="updateMaterialCommand()">
										<span class="glyphicon glyphicon-ok"></span> {{ Main_Validate }}
									</button>
								</form>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<div id="messageUpdateMaterial" class="alert alert-{{ messageType }} alert-dismissible" role="alert" ng-show="messageUpdateMaterialVisible">
						<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
						{{ messageLabel }}
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="modal" id="confirmDeleteMaterial">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">x</button>
					<h4 class="modal-title">#{{ currentMaterial.Id }} {{ currentMaterial.Name }}</h4>
				</div>
				<div class="modal-body">
					<div class="container">
						<div class="row">
							<div class="col-sm-5">
								{{ Materials_ConfirmDeleteMaterialLabel }}
								<div class="input-group">
									<div class="input-group-btn">
										<button type="button" class="btn btn-primary" ng-click="deleteMaterialCommand(currentMaterial)">
											<span class="glyphicon glyphicon-ok"></span>
										</button>
										<button type="button" class="btn btn-primary" ng-click="cancelDeleteMaterialCommand()">
											<span class="glyphicon glyphicon-remove"></span>
										</button>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
			
				</div>
			</div>
		</div>
	</div>
</div>